<template>
  <div>
    <!-- 图片 歌词  -->
    <div class="left-box">
      <!-- zuo -->
      <!--   左边图片区域与外联 -->
      <div class="l-b-i">
        <!-- 图片 -->
        <div class="f-img">
          <img :src="picUrl" alt="" />
          <span class="f-spb"></span>
        </div>
        <!-- 外链 -->
        <div class="f-sp">
          <a href="javascript:;">生成外链链接</a>
        </div>
      </div>
      <!-- 歌词界面 -->
      <div class="l-b-r">
        <!-- 头部歌名图标 -->
        <div class="ht">
          <!-- 静态单手 -->
          <span></span>
          <h2>{{ songsName }}</h2>
          <!-- av -->
          <a href="JavaScript:;">
            <i></i>
          </a>
        </div>
        <!-- 歌手 -->
        <div class="dec">
          <span>歌手: </span>
          <a href="JavaScript:;" @click="goartist(detailList[0].ar[0].id)">{{ singerName }}</a>
        </div>
        <!-- 所属专辑 -->
        <div class="dec">
          <span>所属专辑: </span>
          <a href="JavaScript:;" @click="goalbumpage(detailList[0].al.id)">{{ album }}</a>
        </div>
        <!-- 六个标签 -->
        <div class="icon">
          <a href="JavaScript:;" class="btn-i bg" @click="playMusic"
            ><i>播放</i></a
          >
          <a href="JavaScript:;" class="btn-ii bg"></a>
          <a href="JavaScript:;" class="btn-iii bg u-btn-i"
            ><i class="bg u-btn">收藏</i></a
          >
          <a href="JavaScript:;" class="btn-iiii bg u-btn-i">
            <i class="bg u-btn">分享</i></a
          >
          <a href="JavaScript:;" class="btn-iiiii bg u-btn-i">
            <i class="bg u-btn">下载</i></a
          >
          <a href="JavaScript:;" class="btn-iiiiii bg">
            <i class="bg"
              >(<span>{{ musicAreasList.total }}</span
              >)</i
            ></a
          >
        </div>
        <!-- 歌词列表 -->
        <div class="bd-open">
          <ul class="lyric" ref="ulric">
            <!-- <li v-for="hot in musicAreasList.hotComments" :key="hot.commentId">{{hot.content}}</li> -->
            <li v-for="item in lyricsObjArr" :key="item.uid">
              {{ (item.lyric = "" ? "\xa0" : item.lyric) }}
            </li>
          </ul>
          <div @click="changelyrics">
            <a>{{ islyrics ? "展开" : "收起" }}</a>
          </div>
        </div>
      </div>
    </div>

    <!-- 评论区 -->
    <Review :musicAreasList="musicAreasList" />
    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="(musicAreasList.total)/2"
      @current-change="changepage"
    >
    </el-pagination>
  </div>
</template>

<script>
import Review from "@/components/Review";
export default {
  components: {
    Review,
  },
  data() {
    return {
      ids: this.$route.query.ids,
      // 条数
      limit:20,
      // 分页
      limitIndex:0,

      //歌手信息
      detailList: [],
      songsName: "",
      // songsList:[]
      // 图片
      picUrl: "",
      // 名字
      singerName: "",
      album: "",

      // musicAreasList 评论区
      musicAreasList: {},
      newMusicAreasList: {},
      // 歌词
      lyricsObjArr: [],
      // 默认收起
      islyrics: true,
    };
  },
  mounted() {
    this.getDetailList();
    this.getMusicAreas();
    this.getMusicLyric();
  },

  methods: {
    // 传到下面播放器
    playMusic() {
      this.$store.dispatch("getDetailList", this.ids);
      const big = {
        ids: this.ids,
        picUrl: this.picUrl,
      };
      this.$bus.$emit("singid", big);
    },

    // this.$API.reqDetailList()  获取详情信息
    async getDetailList() {
      // console.log(this.$route.query.ids)
      const result = await this.$API.reqDetailList(this.ids);
      console.log(result);
      if (result.code == 200) {
        this.detailList = result.songs || [];
        this.isName();
      } else {
        alert("单曲错误");
      }
    },
    // 简化
    isName() {
      if (this.detailList[0]) {
        this.songsName = this.detailList[0].name;
        this.picUrl = this.detailList[0].al.picUrl;
        this.singerName = this.detailList[0].ar[0].name;
        this.album = this.detailList[0].al.name;
      }
    },
    // 获取评论区 reqMusicArea
    // 必选参数 : id: 音乐 id
    // 可选参数 : limit: 取出评论数量 , 默认为 20
    //  const ids = this.$route.query.ids;
    async getMusicAreas() {
      // 传过 来的id
      const data = {
        id: this.ids,
        limit: this.limit,
        // 条数乘以分页数
        offset: this.limit * this.limitIndex,
      };
      const result = await this.$API.reqMusicArea(data);
      // console.log(result)
      if (result.code == 200) {
        this.musicAreasList = result || {};
      } else {
        alert("获取评论列表失败");
      }
    },

    // 分页监听器
    changepage(index) {
      // console.log(index)
      this.limitIndex = index - 1;
      this.getMusicAreas();
    },

    // 获取歌词 reqMusicLyric
    async getMusicLyric() {
      // 传过 来的id
      const id = this.ids;
      const result = await this.$API.reqMusicLyric(id);
      // console.log(result)
      if (result.code == 200) {
        // 保留数据
        const lyric = result.lrc.lyric;
        // 正则所有\n
        const regNewLine = /\n/;
        // 分隔所有\n 保留到lineArr
        const lineArr = lyric.split(regNewLine);
        // 正则表达式 匹配所有时间    [01:23.230]
        const regTime = /\[\d{2}:\d{2}.\d{2,3}\]/;
        // 遍历分隔后的数组
        lineArr.forEach((item) => {
          // 遍历数组  [00:00.000] 作词 : 代岳东/周振霆
          // console.log(item)
          if (item === "") return;
          const obj = {};
          // 每一项匹配正则
          const time = item.match(regTime);
          // 给obj添加一个lyric属性  切割】后面的文字去除空白 如果没有文字就返回空 有就去除空白
          obj.lyric =
            item.split("]")[1].trim() === "" ? " " : item.split("]")[1].trim();
          // console.log(lyric);
          // 如果有时间这一项 就返回格式化后的时间 没有就返回0
          obj.time = time
            ? this.formatLyricTime(time[0].slice(1, time[0].length - 1))
            : 0;
          // 生成随机id
          obj.uid = Math.random().toString().slice(-6);

          if (obj.lyric === "") {
            // console.log("这一行没有歌词");
            this.lyricsObjArr.push("\xa0");
          } else {
            // 有歌词就添加一项
            this.lyricsObjArr.push(obj);
          }
        });
      } else {
        alert("获取失败");
      }
    },
    // 时间
    formatLyricTime(time) {
      // 格式化歌词的时间 转换成 sss:ms
      const regMin = /.*:/;
      const regSec = /:.*\./;
      const regMs = /\./;
      // 取整 时间进行正则匹配  取两位
      const min = parseInt(time.match(regMin)[0].slice(0, 2));
      // 取整 时间进行正则匹配  取三
      let sec = parseInt(time.match(regSec)[0].slice(1, 3));
      const ms = time.slice(
        time.match(regMs).index + 1,
        time.match(regMs).index + 3
      );
      if (min !== 0) {
        sec += min * 60;
      }
      return Number(sec + "." + ms);
    },
    // 改变展开或者收起
    changelyrics() {
      if (this.islyrics) {
        this.islyrics = false;
        this.$refs.ulric.className = "lyrics";
      } else {
        this.islyrics = true;
        this.$refs.ulric.className = "lyric";
      }
    },
    // 跳转歌手
    goartist(id) {
      this.$router.push(`/artist?id=${id}`);
    },
    goalbumpage(id){
      this.$router.push(`/albumpage?id=${id}`);
    }
  },
};
</script>

<style lang="less" scoped>
// 公共背景

// 显示全部
.lyrics {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
// 显示十条
.lyric {
  display: -webkit-box;
  -webkit-line-clamp: 10;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

i {
  font-style: normal;
}
.bg {
  background-image: url("~@/assets/image/button2.png");
}
// 公共a标签大小
.u-btn {
  font-size: 12px;
  //   color: #000;
  display: inline-block;
  width: 56px;
  height: 31px;
  text-align: right;
  line-height: 31px;
  min-width: 23px;
  cursor: pointer;
}
.u-btn-i {
  height: 31px;
  line-height: 30px;
  min-width: 23px;
  width: 60px;
  cursor: pointer;
  background-position: right -1019px;
  margin-right: 10px;
}

//  上方区域 图片与歌词
.left-box {
  display: flex;
  .l-b-i {
    width: 270px;
    // background-color: aquamarine;
    .f-img {
      width: 218px;
      position: relative;

      margin: 40px;
      img {
        width: 138px;
        height: 138px;
        margin: 32px;
      }
      .f-spb {
        position: absolute;
        width: 206px;
        height: 205px;
        top: -4px;
        left: -4px;
        background-position: -140px -580px;
        background-image: url("~@/assets/image/coverall.png");
      }
    }
    .f-sp {
      margin: 0 86px;
      a {
        color: rgb(12, 162, 222);
      }
    }
  }
  .l-b-r {
    margin-top: 30px;
    width: 100%;
    // height: 1000px;
    // background-color: bisque;
    a {
      color: rgb(12, 162, 222);
    }

    // 头部歌名图标
    .ht {
      display: flex;
      align-items: center;
      span {
        padding-left: 10px;
        width: 54px;
        height: 24px;
        background-position: 0 -463px;
        display: inline-block;
        background-image: url("~@/assets/image/icon.png");
      }
      a {
        margin-left: 10px;
        margin-top: 5px;
        i {
          display: inline-block;
          width: 21px;
          height: 18px;
          background-position: 0 -18px;
          background-image: url("~@/assets/image/icon.png");
        }
      }
    }

    // 歌手 与专辑
    .dec {
      margin: 10px 0;
      span {
        color: rgb(153, 153, 153);
      }
    }

    // 六个icon
    .icon {
      margin-top: 15px;
      display: flex;
      height: 40px;
      align-items: center;
      a {
        color: #000;
      }
      .btn-i {
        display: inline-block;
        width: 66px;
        height: 31px;
        // background-position: right -428px;
        background-position: 0 -387px;
        text-align: end;
        i {
          margin-right: 5px;
          // margin-top: 10px
          line-height: 28px;
          color: #fff;
        }
      }
      .btn-ii {
        display: inline-block;
        width: 38px;
        height: 31px;
        background-position: 0 -1588px;
      }
      .btn-iii {
        // background-position: right -1020px;
        i {
          background-position: 0 -977px;
        }
      }
      .btn-iiii {
        i {
          background-position: 0 -1225px;
        }
      }
      .btn-iiiii {
        i {
          background-position: 0 -2761px;
        }
      }
      .btn-iiiiii {
        height: 31px;
        line-height: 30px;
        min-width: 23px;
        width: 87px;
        cursor: pointer;
        background-position: right -1019px;
        margin-right: 10px;
        i {
          font-size: 12px;
          //   color: #000;
          display: inline-block;
          width: 84px;
          height: 31px;
          text-align: right;
          line-height: 31px;
          min-width: 23px;
          cursor: pointer;
          background-position: 0 -1465px;
        }
      }
    }

    // 歌词
    .bd-open {
      margin-top: 30px;
      li {
        line-height: 20px;
        font-size: 12px;
      }
    }
  }
}
</style>
